import { useMemo } from 'react'
import { useState } from 'react'

const sum = (x) => {
	console.log('计算了')
	return x + 1
}

function UseMemo() {
	console.log('组件更新了')

	const [count1, setCount1] = useState(0)
	const [count2, setCount2] = useState(0)

	// 如何是这样的写法，每次组件更新渲染都会调用 sum 函数重新计算，导致性能问题。
	// const memoizedResult = sum(count1)

	// 使用 useMemo 优化性能，只有当 count1 变化时才重新调用  sum 函数进行计算，而不是没有组件更新时也会调用。
	const memoizedResult = useMemo(() => sum(count1), [count1])

	return (
		<>
			<h2>UseMemo</h2>
			<hr />
			<p>Count1: {count1}</p>
			<button onClick={() => setCount1(count1 + 1)}>Count1 Add 1</button>
			<p>Count2: {count2}</p>
			<button onClick={() => setCount2(count2 + 1)}>Count2 Add 1</button>
			<p>memoizedResult: {memoizedResult}</p>
		</>
	)
}

export default UseMemo
